import Header from './components/Header'
import Footer from './components/Footer'
import Goods from './components/Goods'
import Step from './components/Step'

import styled from 'styled-components'
import { useDispatch, useSelector } from 'react-redux'
import { updateCountAction, initGoodsAction } from './store/actions/cart.js'
import { useEffect } from 'react'

const Wrapper = styled.div`
  padding: 40px 0 50px 0;
  font-size: 12px;
`

export default function App() {
  const cart = useSelector(state => state.cart)
  const dispatch = useDispatch()

  useEffect(() => {
    dispatch(initGoodsAction())
  }, [dispatch])

  return (
    <Wrapper>
      <Header title="购物车案例" bgcolor="orange" />
      {cart.map(item => (
        <Goods key={item.id} {...item}>
          <Step num={item.goods_count} onNumChange={num => dispatch(updateCountAction({ id: item.id, count: num }))} />
        </Goods>
      ))}
      <Footer />
    </Wrapper>
  )
}
